/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-03-22 09:05:01
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-05-11 14:15:12
 * @FilePath: \vite-project\src\pages\system\platform\org\index.tsx
 */

import { addOrganization, queryLoginOrgTree } from 'apis/org';
import MenuTree from 'components/MenuTree/Index';
import CommonDrawer from 'components/common/CommonDrawer';
import OrgForm from 'components/org/OrgForm';
import OrgFormCont from 'components/org/OrgFormCont';
// import OrgRoleInfo from 'components/org/OrgRoleInfo';
// import OrgUserInfo from 'components/org/OrgUserInfo';
import useOrgForm from 'hooks/org/useOrgForm';
import { Button, Empty, Input, Space, Tabs } from 'antd';
import React, { useState } from 'react';
import OrgUserInfo from '../../user/userManage/Index';
import OrgRoleInfo from '../../role/roleManage/Index';

function OrgPage(): JSX.Element {
    const [queryCondition, setQueryCondition] = useState<string | null>(null);
    const [parentNode, setParentNode] = useState<{
        name: any;
        id: any;
    } | null>(null);
    const [treeData, setTreeData] = useState<any[]>([]);
    const { visible, editFormData, MenuTreeRef, handleClose, handleAdd, handleDel, getOrgDetail } = useOrgForm();
    const items: any[] = [
        {
            key: 1,
            label: '机构信息',
            children: (
                <OrgForm
                    editFormData={editFormData}
                    parentNode={parentNode}
                    treeData={treeData}
                    onSuccess={() => MenuTreeRef.current?.refresh?.()}
                />
            ),
        },
        {
            key: 2,
            label: '人员信息',
            children: <OrgUserInfo parentNode={parentNode} treeData={treeData} />,
        },
        {
            key: 3,
            label: '角色信息',
            children: <OrgRoleInfo parentNode={parentNode} />,
        },
    ];

    const onSelect = (_selectedKeys: any, { selected, node }: any) => {
        if (selected) {
            setParentNode(node);
            // 获取机构详情
            getOrgDetail(node);
        } else {
            setParentNode(null);
        }
    };
    const onUpdateTreeData = (data: any[]) => {
        setTreeData(data);
    };
    const onSubmit = async (form: any, closeLoading: any, closeModal: any) => {
        try {
            const res = await addOrganization(form);
            closeModal?.();
            MenuTreeRef.current?.refresh?.();
        } finally {
            closeLoading?.();
        }
    };
    return (
        <>
            <div className='bg-white p-12px mb-12px'>
                <Input
                    className='w-300px'
                    placeholder='请输入关键词'
                    onChange={(e) => setQueryCondition(e.target.value)}
                    allowClear
                />
            </div>

            <div className='flex min-h-600px' style={{ height: 'calc(100vh - 204px)' }}>
                <div className='w-300px p-12px mr-12px bg-white'>
                    <Space className='flex justify-end'>
                        <Button
                            onClick={() =>
                                handleAdd({
                                    parentId: parentNode?.id,
                                })
                            }
                            type='primary'
                            disabled={treeData?.length === 0}
                        >
                            新增机构
                        </Button>
                        <Button
                            type='primary'
                            disabled={!parentNode?.id}
                            onClick={() => handleDel(parentNode, () => setParentNode(null))}
                        >
                            删除
                        </Button>
                    </Space>
                    <div className='bg-[#eee] h-1px my-12px' />
                    <MenuTree
                        queryCondition={queryCondition}
                        onSelect={onSelect}
                        onUpdateTreeData={onUpdateTreeData}
                        api={() =>
                            queryLoginOrgTree({
                                name: queryCondition,
                            })
                        }
                        ref={MenuTreeRef}
                        fieldNamesTitle='name'
                        fieldNamesKey='id'
                    />
                </div>
                <div className='flex-1 bg-white px-12px'>
                    {parentNode?.id ? (
                        <>
                            <div className='py-12px text-16px font-bold'>
                                <span>{parentNode?.name}</span>
                            </div>
                            <Tabs defaultActiveKey='1' items={items} destroyInactiveTabPane />
                        </>
                    ) : (
                        <Empty className='mt-70px' description='请选择树节点' />
                    )}
                </div>
            </div>

            <CommonDrawer
                title='新增机构'
                open={visible}
                close={handleClose}
                onSubmit={onSubmit}
                initFormData={editFormData}
            >
                <OrgFormCont treeData={treeData} />
            </CommonDrawer>
        </>
    );
}
export default React.memo(OrgPage);
